<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <script src="./js/mobileNav.js" defer></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flyme官网-首页</title>
  </head>
  <body>
    <!-- 头部内容 -->
    <header>
      <!-- 顶部导航 -->
      <div class="top-nav">
        <div class="top-nav-main">
          <div class="logo">
            <a href="./index.html">
              <svg
                class="logoSvg"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 439.49 157.99"
                style="width: 90px; height: 32px; fill: #fff"
              >
                <g id="a"></g>
                <g id="b">
                  <g id="c">
                    <g>
                      <polygon
                        class="d"
                        points="132.4 157.99 151.61 157.99 202.14 35.99 182.93 35.99 159.1 95.05 135.28 35.99 116.06 35.99 149.77 117.36 132.4 157.99"
                      ></polygon>
                      <path
                        class="d"
                        d="M415.69,95.69c-4.95,6.27-12.61,10.31-21.2,10.31-12.58,0-23.18-8.65-26.16-20.31h70.66c.33-2.18,.5-4.42,.5-6.69,0-24.81-20.19-45-45-45s-45,20.19-45,45,20.19,45,45,45c18.92,0,35.13-11.74,41.78-28.31h-20.58Zm-21.2-43.69c11.24,0,20.89,6.9,24.95,16.69h-49.9c4.06-9.79,13.71-16.69,24.95-16.69Z"
                      ></path>
                      <path
                        class="d"
                        d="M0,27V122H18v-50h50v-18H18V27c0-4.97,4.03-9,9-9h47V0H27C12.09,0,0,12.09,0,27Z"
                      ></path>
                      <rect class="d" x="88" y="0" width="18" height="122"></rect>
                      <path
                        class="d"
                        d="M302.49,34.08c-10.75,0-20.41,4.74-27.01,12.24-5.61-7.43-14.51-12.24-24.53-12.24-7.86,0-15.02,2.95-20.45,7.81v-5.89h-18V122.08h18v-52c0-9.92,8.07-18,18-18s18,8.08,18,18v52h18v-52c0-9.92,8.07-18,18-18s18,8.08,18,18v52h18v-52c0-19.85-16.15-36-36-36Z"
                      ></path>
                    </g>
                  </g>
                </g>
              </svg>
            </a>
          </div>
          <ul class="top-nav-list">
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">Flyme AIOS</a></li>
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">Flyme Auto</a></li>
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">无界智行</a></li>
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">系统更新</a></li>
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">云服务</a></li>
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">社区</a></li>
            <li><a class="nav-item" target="_blank" href="https://www.meizu.com">魅族官网</a></li>
          </ul>
        </div>
        <!-- 移动端导航 -->
        <div class="mobile-top-nav">
          <div class="logo">
            <a href="./index.html">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 439.49 157.99"
                style="width: 64px; height: 23px; fill: #0195ff"
              >
                <g id="a"></g>
                <g id="b">
                  <g id="c">
                    <g>
                      <polygon
                        class="d"
                        points="132.4 157.99 151.61 157.99 202.14 35.99 182.93 35.99 159.1 95.05 135.28 35.99 116.06 35.99 149.77 117.36 132.4 157.99"
                      ></polygon>
                      <path
                        class="d"
                        d="M415.69,95.69c-4.95,6.27-12.61,10.31-21.2,10.31-12.58,0-23.18-8.65-26.16-20.31h70.66c.33-2.18,.5-4.42,.5-6.69,0-24.81-20.19-45-45-45s-45,20.19-45,45,20.19,45,45,45c18.92,0,35.13-11.74,41.78-28.31h-20.58Zm-21.2-43.69c11.24,0,20.89,6.9,24.95,16.69h-49.9c4.06-9.79,13.71-16.69,24.95-16.69Z"
                      ></path>
                      <path
                        class="d"
                        d="M0,27V122H18v-50h50v-18H18V27c0-4.97,4.03-9,9-9h47V0H27C12.09,0,0,12.09,0,27Z"
                      ></path>
                      <rect class="d" x="88" y="0" width="18" height="122"></rect>
                      <path
                        class="d"
                        d="M302.49,34.08c-10.75,0-20.41,4.74-27.01,12.24-5.61-7.43-14.51-12.24-24.53-12.24-7.86,0-15.02,2.95-20.45,7.81v-5.89h-18V122.08h18v-52c0-9.92,8.07-18,18-18s18,8.08,18,18v52h18v-52c0-9.92,8.07-18,18-18s18,8.08,18,18v52h18v-52c0-19.85-16.15-36-36-36Z"
                      ></path>
                    </g>
                  </g>
                </g>
              </svg>
            </a>
          </div>
          <div class="open">
            <div></div>
            <div></div>
          </div>
          <ul class="mobile-nav-list">
            <li><a target="_blank" href="https://www.meizu.com">Flyme AIOS</a></li>
            <li><a target="_blank" href="https://www.meizu.com">Flyme Auto</a></li>
            <li><a target="_blank" href="https://www.meizu.com">无界智行</a></li>
            <li><a target="_blank" href="https://www.meizu.com">系统更新</a></li>
            <li><a target="_blank" href="https://www.meizu.com">云服务</a></li>
            <li><a target="_blank" href="https://www.meizu.com">社区</a></li>
            <li><a target="_blank" href="https://www.meizu.com">魅族官网</a></li>
          </ul>
        </div>
      </div>

      <!-- 轮播图 -->
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="imgItem" style="background-image: url('./image/banner1.png')"></div>
          </div>
          <div class="swiper-slide">
            <div class="imgItem" style="background-image: url('./image/banner2.png')"></div>
          </div>
          <div class="swiper-slide">
            <div class="imgItem" style="background-image: url('./image/banner3.png')"></div>
          </div>
          <div class="swiper-slide">
            <div class="imgItem" style="background-image: url('./image/banner4.png')"></div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main>
      <!-- 内容区 -->
      <div class="content container">
        <a target="_blank" href="https://www.meizu.com">
          <img src="./image/content1.png" alt="content1.png" />
        </a>
        <a target="_blank" href="https://www.meizu.com">
          <img src="./image/content2.png" alt="content2.png" />
          <p>
            <svg
              t="1591944997106"
              class="icon svg_icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="760"
              width="16"
              height="16"
            >
              <path
                d="M1024 1024H307.2V307.2h716.8zM358.4 972.8h614.4V358.4H358.4z"
                fill="#FFFFFF"
                p-id="761"
              ></path>
              <path d="M51.2 51.2h716.8v716.8H51.2z" fill="#FFFFFF" p-id="762"></path>
            </svg>
            Flyme 壁纸
          </p>
        </a>
        <a target="_blank" href="https://www.meizu.com">
          <img src="./image/content3.png" alt="content3.png" />
        </a>
        <a target="_blank" href="https://www.meizu.com">
          <img src="./image/content4.png" alt="content4.png" />
        </a>
        <a target="_blank" href="https://www.meizu.com">
          <img src="./image/content5.png" alt="content5.png" />
        </a>
      </div>
    </main>

    <!-- 底部内容 -->
    <footer>
      <!-- 底部内容 -->
      <div class="footer">
        <div class="footer-content container">
          <div class="footer-nav-container">
            <dl class="footer-nav">
              <dt>应用服务</dt>
              <dd>
                <a target="_blank" href="https://www.meizu.com">查找手机</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">换机助手</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">应用商店</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">Root权限</a>
              </dd>
            </dl>
            <dl class="footer-nav">
              <dt>新闻资讯</dt>
              <dd>
                <a target="_blank" href="https://www.meizu.com">往期动态</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">官方视频</a>
              </dd>
            </dl>
            <dl class="footer-nav">
              <dt>官方网站</dt>
              <dd>
                <a target="_blank" href="https://www.meizu.com">开放平台</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">企业定制</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">魅族互娱</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">应用公示</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">用户手册</a>
              </dd>
            </dl>
            <dl class="footer-nav">
              <dt>关于我们</dt>
              <dd>
                <a target="_blank" href="https://www.meizu.com">新浪微博</a>
              </dd>
              <dd>
                <a target="_blank" href="https://www.meizu.com">官方微信</a>
              </dd>
            </dl>
          </div>
          <!-- 移动端底部导航 -->
          <div class="mobile-footer-nav-container">
            <div class="mobile-nav-container">
              <div class="nav-title">
                <span>应用服务</span>
                <div class="arrowhead"></div>
              </div>
              <ul>
                <li>
                  <a target="_blank" href="https://www.meizu.com">查找手机</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">换机助手</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">应用商店</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">Root权限</a>
                </li>
              </ul>
            </div>
            <div class="mobile-nav-container">
              <div class="nav-title">
                <span>新闻资讯</span>
                <div class="arrowhead"></div>
              </div>
              <ul>
                <li>
                  <a target="_blank" href="https://www.meizu.com">往期动态</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">官方视频</a>
                </li>
              </ul>
            </div>
            <div class="mobile-nav-container">
              <div class="nav-title">
                <span>官方网站</span>
                <div class="arrowhead"></div>
              </div>
              <ul>
                <li>
                  <a target="_blank" href="https://www.meizu.com">开放平台</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">企业定制</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">魅族互娱</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">应用公示</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">用户手册</a>
                </li>
              </ul>
            </div>
            <div class="mobile-nav-container">
              <div class="nav-title">
                <span>关注我们</span>
                <div class="arrowhead"></div>
              </div>
              <ul>
                <li>
                  <a target="_blank" href="https://www.meizu.com">新浪微博</a>
                </li>
                <li>
                  <a target="_blank" href="https://www.meizu.com">官方微信</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="online-service">
            <p class="phone-number">400-788-3333</p>
            <p class="online-time">周一至周日 8:00-24:00</p>
            <button>在线客服</button>
          </div>
        </div>
      </div>
    </footer>
  </body>
  <script src="./js/swiper-bundle.min.js"></script>
  <script>
    const navItem = document.querySelectorAll('.nav-item');
    const logoSvg = document.querySelector('.logoSvg');
    var mySwiper = new Swiper('.swiper', {
      loop: false, // 循环模式选项
      autoplay: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      on: {
        slideChangeTransitionEnd() {
          console.log('this.activeIndex: ', this.activeIndex);
          if (this.activeIndex === 2) {
            logoSvg.style.fill = '#333';
            navItem.forEach((item) => {
              item.style.color = '#333';
            });
          } else if (this.activeIndex === 3) {
            logoSvg.style.fill = '#0095ff';
            navItem.forEach((item) => {
              item.style.color = '#0095ff';
            });
          } else {
            logoSvg.style.fill = '#fff';
            navItem.forEach((item) => {
              item.style.color = '#fff';
            });
          }
        }
      }
    });
  </script>
</html>
